<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兑换记录</title>
    <link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/order.css?t=1">
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/reset.js"></script>
</head>
<body>
   <div id="app">
  		<!-- 添加stick变固定定位-->
		<div class="center title ml mr stick">
			<div class="left fontc" v-on:click="chooseMonth">
				{{monthFmt}}<img src="./img/detail-down.png" alt="">
				<input type="hidden" id="hidden_value" :data-options="dateOpt"/>
			</div>
			<div class="right" style="color: #797B7B;">展示近1年的兑换记录</div>
		</div>
        <!-- 空页面 --> 
        <div v-if="no_data" class="empty">
            <div class="cover">
                <img src="./img/icon-search.png" alt="">
            </div>
            <p class="fontc-gray font-min">您还没有兑换记录</p>
            <!-- <a href="index.html" class="btn btn-linner-bgc">现在去看看</a> -->
        </div>
        <!-- 有数据的页面 -->
        <div v-else class="log wrap mt">
			
            <div class="list ml mr mt">
				
                <div class="item bgc mb" v-for="order in order_datas">
                    <div class="goods-info center">
                        <!-- 商品图片 -->
                        <div class="cover"><img :src="order.pic" alt=""></div>
                        <!-- 商品名字以及兑换日期 -->
                        <div class="content">
                            <div class="name">{{order.name}}</div>
                            <div class="time font-min fontc-gray">{{order.time}}</div>
                        </div>
                    </div>
                    <!-- 抵扣的快豆金额 -->
                    <div class="coin fontc">{{order.value}}</div>
                </div>
                
            </div>
        </div>
        <!-- 回到首页 -->
        <a href="index.html" class="home btn-linner-bgc"><img src="img/home.png" alt=""><span>首页</span></a>

   </div>
   
<script src="js/fmt.time.js"></script>
<script src="js/jquery.date.js?t=1"></script>
<script>
	var vm = new Vue({
		el: '#app',
        data:{
        	dateOpt: "",
        	month: '2021-04',
        	monthFmt: '',
        	no_data: false,
        	order_datas: []
    	},
        methods:{
        	chooseMonth(){
        		$("#hidden_value").click();
        	}
        }
	});
	
	init();
	function init(){
		var month = nowMonth();
		var dateArray = month.split("-");
		var dateOpt = "{'callback':'pickCallFunc','type':'YYYY-MM','beginYear':2021, 'beginMonth':3, ";
		dateOpt += "'endYear':"+parseInt(dateArray[0])+", 'endMonth':"+parseInt(dateArray[1])+"}";
		vm.dateOpt = dateOpt;
		vm.month = month;
		$.date('#hidden_value');
		formatMonth();
		
		queryList();
	}
	//日期
	function pickCallFunc(month){
		if(month==vm.month){
			return;
		}
		vm.month = month;
		formatMonth();
		queryList();
	}
	function formatMonth(){
		var array = vm.month.split("-");
		var str = array[0]+"年"+array[1]+"月";
		vm.monthFmt = str;
	}
	
	function queryList(){
		$.post("../api/prod/order", {"token":localStorage.getItem("token"), "month": vm.month}, function(data){
			if(data.retCode){
				var page = data.result;
				if(page.count<=0){
					vm.no_data = true;
				}else{
					vm.no_data = false;
					vm.order_datas = page.data;
				}
			}
		});
	}
</script>
    
</body>
</html>